<template>
  <div class="user-list">
    <div style="text-align: center">
      <el-tag size="medium " style="font-size: 20px; margin: 2px">企业名称:{{sysEnterpriseName}}</el-tag>
    </div>
    <div class="search">
      <el-form ref="searchSysUserList" :model="searchSysUserList" :inline="true" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="searchSysUserList.sysUserName" />
        </el-form-item>
        <el-form-item label="用户状态" prop="region">
          <el-select v-model="searchSysUserList.flag" placeholder="请选择状态">
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('searchSysUserList')">查询</el-button>
          <el-button @click="resetForm('searchSysUserList')">重置</el-button>
        </el-form-item>
        <el-button type="success" v-if="buttons.add" @click="userAdd()">新增</el-button>
      </el-form>

    </div>
    <div class="data">
      <el-table border :data="tableDataSysUserList" size="mini " style="width: 100%">
        <el-table-column label="姓名" width="80">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.sysUserName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="120">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.sysUserPhone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.flag!=null && scope.row.flag==0" type="success" round>已启用</el-tag>
              <el-tag v-if="scope.row.flag!=null && scope.row.flag==1" type="danger" round>已禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账号密码" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pwdBinding" size="medium  " type="success" round>已绑定</el-tag>
            <el-tag v-else size="medium  " type="info" round>未绑定</el-tag>
            <el-tag v-if="scope.row.pwdBindingFlag!=null && scope.row.pwdBindingFlag==0" size="medium  " type="success" round>已启用</el-tag>
            <el-tag v-if="scope.row.pwdBindingFlag!=null && scope.row.pwdBindingFlag==1" size="medium  " type="danger" round>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="微信" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.wxBinding" size="medium  " type="success" round>已绑定</el-tag>
            <el-tag v-else size="medium  " type="info" round>未绑定</el-tag>
            <el-tag v-if="scope.row.pwdBindingFlag!=null && scope.row.pwdBindingFlag==0" size="medium  " type="success" round>已启用</el-tag>
            <el-tag v-if="scope.row.pwdBindingFlag!=null && scope.row.pwdBindingFlag==1 && scope.row.wxBinding" size="medium  " type="danger" round>已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button v-if="scope.row.editButtonShow && buttons.edit" size="mini" round :loading="editLoading.loading && scope.row.uuid===editLoading.uuid" @click="userModify(scope.$index, scope.row)">编辑</el-button>
              <el-button v-if="scope.row.pwdButtonShow && buttons.userPwd" size="mini" type="primary" round :loading="pwdLoading.loading && scope.row.uuid===pwdLoading.uuid" @click="handlePwd(scope.$index, scope.row)">修改密码</el-button>
              <el-button v-if="scope.row.roleButtonShow && buttons.userCheckRoles" size="mini" type="danger" round :loading="authorLoading.loading && scope.row.uuid===authorLoading.uuid" @click="sysUserCheckRoles(scope.$index, scope.row)">授权角色</el-button>
              <el-button v-if="scope.row.disabledFlagButtonShow && scope.row.disabledFlag===1 && buttons.userStatus" size="mini" type="danger" round :loading="openLoading.loading && scope.row.uuid===openLoading.uuid" @click="handleOpen(scope.$index, scope.row)">启用</el-button>
              <el-button v-if="scope.row.disabledFlagButtonShow && scope.row.disabledFlag===0 && buttons.userStatus" size="mini" type="warning" round :loading="closeLoading.loading && scope.row.uuid===closeLoading.uuid" @click="handleClose(scope.$index, scope.row)">禁用</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        :current-page="searchSysUserList.currentPage"
        :page-sizes="[20,50 , 100,200, 300, 400]"
        :page-size="searchSysUserList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchSysUserList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--组件-->
    <user-add :user-add-to-child="userAddToChild" @userAddToFather="userAddToFather" />
    <user-modify :user-modify-to-child="userModifyToChild" @userModifyToFather="userModifyToFather" />
    <roles-to-user :roles-to-user-child="rolesToUserChild" @rolesToUserFather="rolesToUserFather" />
    <user-pwd :user-pwd-child="userPwdChild" @userPwdToFather="userPwdToFather" />
  </div>
</template>

<script>
import UserAdd from './component/UserAdd'
import UserModify from './component/UserModify'
import RolesToUser from './component/RolesToUser'
import UserPwd from './component/UserPwd'
import { userList, userDetail, userCheckRoles, userStatus } from '@/api/momo/SysEnterprise'
export default {
  name: 'SysEnterpriseUserList',
  components: { UserPwd, RolesToUser, UserAdd, UserModify },
  data() {
    return {
      sysEnterpriseName: '',
      searchSysUserList: {
        enterpriseUuid: '',
        sysUserName: '',
        currentPage: 1,
        pageSize: 20,
        total: 0,
        disabledFlag: null
      },
      editLoading: {
        loading: false,
        uuid: ''
      },
      pwdLoading: {
        loading: false,
        uuid: ''
      },
      authorLoading: {
        loading: false,
        uuid: ''
      },
      openLoading: {
        loading: false,
        uuid: ''
      },
      closeLoading: {
        loading: false,
        uuid: ''
      },
      userAddToChild: {},
      userModifyToChild: {},
      rolesToUserChild: {
        enterpriseUuid: '',
        userName: '',
        rolesToUserChild: {}
      },
      userPwdChild: {},
      tableDataSysUserList: [],
      buttons: {
        add: false,
        edit: false,
        userPwd: false,
        userCheckRoles: false,
        userStatus: false,
        detail: false
      }
    }
  },
  created() {
    this.loadSysUserList()
    if (this.$route.meta.buttons) {
      console.log(this.$route.meta.buttons)
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.searchSysUserList.pageSize = val
      this.loadSysUserList()
    },
    handleCurrentChange(val) {
      this.searchSysUserList.currentPage = val
      this.loadSysUserList()
    },
    handleEdit(index, row) {
      this.editLoading.loading = true
      this.editLoading.uuid = row.uuid
    },
    handlePwd(index, row) {
      row.random = '' + Math.random()
      row.enterpriseUuid = this.searchSysUserList.enterpriseUuid
      this.userPwdChild = JSON.parse(JSON.stringify(row))
    },
    handleOpen(index, row) {
      this.showOpenLoading(row.uuid)
      this.$confirm('是否启用', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.disabledFlag = 0
        row.enterpriseUuid = this.searchSysUserList.enterpriseUuid
        userStatus(row).then(res => {
          this.showOpenLoading()
          this.$message({
            type: 'success',
            message: res.data
          })
        })
      }).catch(() => {
        this.showOpenLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleClose(index, row) {
      this.showCloseLoading(row.uuid)
      this.$confirm('是否禁用?', '提示', {
        confirmButtonText: '禁用',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.disabledFlag = 1
        row.enterpriseUuid = this.searchSysUserList.enterpriseUuid
        userStatus(row).then(res => {
          this.showCloseLoading()
          this.$message({
            type: 'success',
            message: res.data
          })
        })
      }).catch(() => {
        this.showCloseLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    userAdd() {
      const data = {}
      data.enterpriseUuid = this.searchSysUserList.enterpriseUuid
      data.random = '' + Math.random()
      this.userAddToChild = data
    },
    userModify(index, row) {
      this.showEditLoading(row.uuid)
      row.enterpriseUuid = this.searchSysUserList.enterpriseUuid
      userDetail(row).then(res => {
        res = res.data
        this.showEditLoading()
        const data = {}
        data.res = res
        data.enterpriseUuid = this.searchSysUserList.enterpriseUuid
        this.userModifyToChild = data
      }).catch(errored => {
        this.showEditLoading()
      }).finally(() => {
        this.showEditLoading()
      })
    },
    sysUserCheckRoles(index, row) {
      this.showAuthorLoading(row.uuid)
      row.enterpriseUuid = this.searchSysUserList.enterpriseUuid
      userCheckRoles(row).then(res => {
        this.showAuthorLoading()
        res = res.data
        const data = {}
        data.res = res
        data.user = row
        data.enterpriseUuid = this.searchSysUserList.enterpriseUuid
        this.rolesToUserChild = data
      }).catch(errred => {
        this.showAuthorLoading()
      })
    },
    userAddToFather(data) {
      this.loadSysUserList()
    },
    userModifyToFather(data) {
      this.loadSysUserList()
    },
    userPwdToFather(data) {
      this.loadSysUserList()
    },
    rolesToUserFather(data) {
    },
    submitForm(formName) {
      this.loadSysUserList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    loadSysUserList() {
      this.searchSysUserList.enterpriseUuid = this.$route.params.uuid
      userList(this.searchSysUserList).then(res => {
        res = res.data
        this.sysEnterpriseName = res.sysEnterpriseName
        this.tableDataSysUserList = res.sysUserListResPageInfo.list
        this.searchSysUserList.total = res.sysUserListResPageInfo.total
        this.searchSysUserList.currentPage = res.sysUserListResPageInfo.currentPage
        this.searchSysUserList.pageSize = res.sysUserListResPageInfo.pageSize
      })
    },
    showCloseLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.closeLoading.loading = false
        this.closeLoading.uuid = ''
      } else {
        this.closeLoading.loading = true
        this.closeLoading.uuid = uuid
      }
    },
    showOpenLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.openLoading.loading = false
        this.openLoading.uuid = ''
      } else {
        this.openLoading.loading = true
        this.openLoading.uuid = uuid
      }
    },
    showAuthorLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.authorLoading.loading = false
        this.authorLoading.uuid = ''
      } else {
        this.authorLoading.loading = true
        this.authorLoading.uuid = uuid
      }
    },
    showEditLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.editLoading.loading = false
        this.editLoading.uuid = ''
      } else {
        this.editLoading.loading = true
        this.editLoading.uuid = uuid
      }
    }
  }
}
</script>

<style scoped>
  .user-list{
    background-color: #fff;
    margin: 2px 5px;
    border-radius: 5px;
  }
  .search{
    padding-top: 20px;
  }
  .data{
    padding: 4px;
  }
  .page{
    margin-top: 20px;
    padding-bottom: 20px;
  }
</style>
